<template>
    <nut-swiper
        :init-page="page"
        :pagination-visible="true"
        pagination-color="#FFFFFF"
        auto-play="3000"
    >
        <nut-swiper-item v-for="(banner, index) in bannerList" :key="index">
            <image :src="banner.img" mode="widthFix" />
        </nut-swiper-item>
    </nut-swiper>
    <img
        v-for="(item, index) in descImgs"
        :key="index"
        :src="item"
        mode="widthFix"
        class="index-img"
    />
</template>

<script setup>
import { ref } from 'vue'
import { bannerConfig } from '@/config/index'

const page = ref(2)
const bannerList = ref(bannerConfig)
const descImgs = [
    'https://coss-ec.fenqile.com/ecproduct201/M00/ex/20230913092544-f44624e6-6c1b-47d6-b331-6a3b523d6c91.jpg',
    'https://coss-ec.fenqile.com/ecproduct201/M00/ex/20230913092604-4afada17-6d7e-40cb-bc2e-3a981dcbfe54.jpg',
    'https://coss-ec.fenqile.com/ecproduct201/M00/ex/20230913092725-480a2544-a966-49fe-baf6-c3ebc2298947.jpg'
]
</script>

<style lang="less">
.nut-swiper-item {
    height: 750px;
    image {
        width: 750px;
    }
}

.index-img {
    width: 750px;
}
</style>
